import React from 'react';
// 模态框组件
import { Button, Modal, Radio, Input } from 'antd';
import { useState, forwardRef, useImperativeHandle } from 'react';
import { addUserFn, editUserFn } from '@/api/user.js'

import eventBus from '@/utils/events'
const Mymodal = forwardRef((props, ref) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 显示
    const showModal = () => {
        setIsModalOpen(true);
    };
    // 点击确认
    const handleOk = () => {
        setIsModalOpen(false);

        // 根据当前是添加还是编辑操作,分别调用不同的接口实现添加和编辑
        console.log(mymodaltitle);
        if (mymodaltitle == '添加') {
            // 调用添加用户接口
            addUserFn(user).then(res => {
                console.log('res', res);
                if (res.data.errNo == 0) {
                    // 清空模态框
                    setUser({ gender: 1 })
                }
            })
        } else {
            //调用编辑接口
            // editUserFn()
            editUserFn(user).then(res => {
                console.log('res', res);
                if (res.data.errNo == 0) {
                    // 表示修改成功
                    props.getlist()
                }
            })
        }


    };
    // 点击取消
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 抛出当前组件自身的方法和数据,已被父组件使用
    useImperativeHandle(ref, () => {
        return { showModal, setUser, setmymodaltitle }
    })

    // 使用受控组件实现表单双向绑定
    const [user, setUser] = useState({ gender: 1 })
    const changeFn = (e, key) => {
        // console.log(e, key);
        user[key] = e.target.value
        // console.log('user', user);
        setUser({ ...user })
    }

    // 接收兄弟组件执行的事件
    eventBus.on('mybrotherFn', (optionType, record) => {
        console.log('兄弟收到了');
        //01: 显示模态框
        showModal();
        //02: 修改模态框标题
        setmymodaltitle(optionType == 'edit' ? '编辑' : '添加')
        console.log(optionType, record);
        //03: 数据回填
        setUser({ ...record })
    })

    const [mymodaltitle, setmymodaltitle] = useState('')
    return (
        <>
            <Modal title={mymodaltitle} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <p>
                    <Input placeholder="用户名" value={user.username} onChange={(e) => changeFn(e, 'username')} />
                </p>
                <p> <Input placeholder="密码" value={user.password} onChange={(e) => changeFn(e, 'password')} /></p>
                <p> <Input placeholder="邮箱" value={user.email} onChange={(e) => changeFn(e, 'email')} /></p>
                <div>
                    <Radio.Group name="radiogroup" onChange={(e) => changeFn(e, 'gender')} value={user.gender} >
                        <Radio value={'1'}>男</Radio>
                        <Radio value={'2'}>女</Radio>
                        <Radio value={'3'}>保密</Radio>
                    </Radio.Group>

                </div>
                <p> <Input placeholder="手机号" value={user.mobile} onChange={(e) => changeFn(e, 'mobile')} /></p>
            </Modal>
        </>
    );
})

export default Mymodal;
